<template>
  <div class="insurance-tyy">
    <h2 class="title">投保意愿</h2>
    <p class="desc">系统将根据"续保优先"和"随机派单"规则，为您匹配最合适的保险公司</p>
    <div class="success-tip" v-if="!selected">
      <div style="display: flex;">
        <van-icon name="success" color="#07c160" />
        <span>匹配成功</span>
      </div>
      <div class="success-p">
        系统已为该车辆匹配到
        <span class="insurance-company">{{deptId || ''}}</span>,联系电话为{{phone}},
        该保险公司工作人员将于48小时(只计算工作日时间)内与您对接沟通，请保持手机畅通。
      </div>
    </div>
    <!-- 操作按钮 -->
    <van-button type="primary" v-if="selected" @click="handleMatch">{{title}}</van-button>
    <div class="btn-group" v-else>
      <van-button type="primary" @click="handleConfirm">确认投保</van-button>
      <van-button plain @click="handleGiveUp">放弃投保</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showDialog, showToast } from 'vant';
import {
	autoMatchInsurer, insurance, insAbandon
} from '/@/api/auth/ytb.ts'
import { userInfoStrore } from '/@/stores/userInfoStore'
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
const store = userInfoStrore()
const phone  = ref(''); // 记录选中项的索引，默认选中第一项
const deptId  = ref(''); // 记录选中项的索引，默认选中第一项
const selected  = ref(true); // 记录选中项的索引，默认选中第一项
const title = ref('随机匹配投保保险公司'); // 记录选中项的索引，默认选中第一项
const selectedIndex = ref(0); // 记录选中项的索引，默认选中第一项

// console.log(store.storeFormfullData,'z')
// 处理选中项的逻辑
const handleMatch = async(index) => {
  const res = await autoMatchInsurer(
    { 
    "dispatchId": "",
    "dispatchType": "",
    "vehicleStatus": store.storeFormfullData.vehicleStatus || "01",
    "vehicleBigType": store.storeFormfullData.vehicleBigType|| "A",
    "insuranceIntention": store.storeFormfullData.insuranceIntention || "01",
    "commercialInsuranceAddress": store.storeFormfullData.commercialInsuranceAddress || "02",
    "commercialIInsuranceCompany": store.storeFormfullData.commercialIInsuranceCompany || "ABIC",
    "compulsoryInsuranceAddress": store.storeFormfullData.compulsoryInsuranceAddress || "02",
    "compulsoryInsuranceCompany": store.storeFormfullData.compulsoryInsuranceCompany || "HTIC"}
  )
  if(res.code == 200){
    phone.value = res.phone
    deptId.value = res.deptId
    selected.value = false;
  }
  showToast(res.msg)
};
// 确认投保 
const handleConfirm = async(index) => { 
  const formfullData = store.storeFormfullData
  // 0 false 代表个人车辆
  formfullData.isUnitVehicle == 0 ? formfullData.isUnitVehicle = false :  formfullData.isUnitVehicle = true
  const res = await insurance(formfullData)
  if(res.code == 200){
    router.replace({ 
        path:"/jump",
    })
  }
  showToast(res.msg);
}
// 放弃投保 
const handleGiveUp = (index) => {
  showDialog({
    title: '确认放弃投保？',
    message: '如"放弃投保",本系统6个月内不再为该车辆提供相关服务,请知悉！',
    confirmButtonText: '删除',
    showCancelButton: true, // 如果需要显示取消按钮
    cancelButtonText: '确认',
    confirmButtonColor: '#f53f3f', // 确认按钮红色，突出危险操作
  })
    .then(() => {
      // 点击确认按钮后的逻辑
      if (index !== -1) {
        // 删除列表项
        selected.value = true;
        showToast('删除成功');
      } else {
        // 处理其他删除逻辑（如删除选中项）1
        showToast('确认操作');
        selected.value = false;
      }
    })
    .catch(() => {
      // 点击取消按钮后的逻辑（可选）
      showToast('已取消删除');
      // selected.value = true;
      router.replace({ 
          path:"/jump",
      })
    });
};

onMounted(async()=>{
  
})
</script>

<style lang="less" scoped>

.insurance-tyy {
  width: 100%;
  padding: 16px;
  margin-top: 20px;
  background: #fff;
  .desc {
    font-size: 13px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .title {
    text-align: left;
  }
  .success-tip {
    border: 1px solid #e5f2ff;
    border-radius: 8px;
    background-color: #f0f9ff;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    .success-p {
      font-size: 13px;
      text-align: left;
    }
  }
  .success-tip span {
    font-weight: bold;
    color: #0066cc;
    margin-bottom: 8px;
  }
  .success-tip span .van-icon {
    margin-right: 6px;
  }
  .btn-group {
    display: flex;
    gap: 10px;
  }
  .btn-group .van-button {
    flex: 1;
  }
}

</style>